<template>
    <div class="song_list" id="song_list">
        <van-nav-bar 
            :title="title" 
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        >
            <van-icon name="search" slot="right" />
        </van-nav-bar>

        <div class="song-serach">
            <div class="home-index-search" @click="router('/song_serach?type=' + type)">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="monasteryname" placeholder="歌曲名称/拼音">
            </div>
        </div>

        <div class="song-list-cont">
            <van-cell :title="item.musicname" v-for="(item, index) of list" :key="index" :url="`/music_pay?id=${item.musicid}&type=${type}`">
                <template slot="right-icon">
                    <i class="iconfont icon-bofangliang- font-right" style="font-size:0.3rem; margin-right:0.1rem"></i>
                    <span class="custom-text font-right">{{ item.visitnum}}次播放</span>
                    <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                </template>
            </van-cell>

            <div class="loding" v-if="loading">
                <img src="http://tmpfile.nbyh.mejimeji.net/loding1.gif" alt="">
            </div>

        </div>
    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"

export default {
    data(){
        return {
            title:'',
            type:'',
            pagenum:1,
            pagesize:20,
            total:0,
            list:[],
            lock:false,
            loading:false,
            monasteryname:''
        }
    },

     

    methods:{
        onClickLeft() {
            this.$router.go(-1)
        },

        router(url) {
            this.$router.push(url)
        },

        //寺庙列表
        async articleDetails() {
            let musictype = this.type === 'music' ? '1' : '2'
            const data = await getResponses(`/fochina/query/musiclist/json`,{'musictype':musictype, 'pagenum': this.pagenum, 'pagesize':this.pagesize})
            
            
            if(data.code === '0000') {
                this.list = this.list.concat(data.data)
                this.total = data.total
                this.loading = false
                this.lock  = false
            } else {
                console.log(data.error)
            }
        }
    },

    mounted(){
        this.type = this.$route.query.type 
        this.title = this.type  === 'music' ? '佛学歌曲' : '佛经念诵'
        this.articleDetails()

        let innerHeight = window.innerHeight

        window.addEventListener('scroll', (e)=>{
            if(window.scrollY + innerHeight + 300 > document.getElementById('song_list').offsetHeight && Math.ceil(this.total/this.pagesize) > this.pagenum) {
                if(this.lock) return;
                this.lock = true
                this.pagenum = this.pagenum +1
                this.loading = true
                this.articleDetails()
            }
        })
    }
}
</script>

<style scoped>
.song-list-cont {
    background-color: #fff;
    border-top:1px solid #F9F9F8;
    border-bottom:1px solid #F9F9F8;
    width:100%;
    padding:0 0.3rem;
    box-sizing: border-box;
}


.font-right {
    font-size: 0.24rem;
    color: #999;
}





.song-serach {
    width:100%;
    height: 0.96rem;
    background-color: #F9F9F8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-serach .home-index-search {
    border: 1px solid #ECECEC;
    border-radius: 2px;
}

.home-index-search {
    width:7rem;
    height: 0.64rem;
    background-color:#fff;
    position: relative;
    
    box-sizing: border-box;
}


.home-index-search i.icon-sousuo{
    position: absolute;
    left:0.28rem;
    top:50%;
    transform: translateY(-50%);
    color:#B2B2B2;
}



.home-index-search i.icon-guanbi {
    position: absolute;
    top:0.12rem;
    right:0.28rem;
    color:#B2B2B2;
}

.home-index-search input {
    border:none;
    width: 6.96rem;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}
</style>

